<script setup>
import { ref } from 'vue'
import { Button, Checkbox } from 'vant'

const agreed = ref(false)
</script>

<template>
  <div class="max-w-sm mx-auto bg-white">
    <div class="min-h-screen flex flex-col p-8 bg-gradient-to-b from-[#F0F9FF] to-white">
      <div class="flex-shrink-0">
        <span class="iconify text-gray-400 text-3xl" data-icon="mdi:close"></span>
      </div>
      <div class="flex-shrink-0 mt-20 mb-24">
        <div class="text-[44px] font-black leading-tight tracking-wider text-gray-800">
          <p>ENJOY</p>
          <div class="flex items-center -ml-1">
            <span>P</span><span class="inline-block shrink-0 w-9 h-9 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 mx-1"></span><span>P</span><span class="ml-5">J</span><span class="inline-block shrink-0 w-9 h-9 rounded-full bg-gradient-to-br from-pink-400 to-fuchsia-500 mx-1"></span><span>URNEY</span>
          </div>
          <p>LET'S GO</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-full">
        <div class="bg-gray-100 rounded-xl p-4 flex justify-between items-center mb-5">
          <span class="text-2xl font-semibold text-gray-800 tracking-wider">199****2503</span><span class="text-sm text-sky-500 font-medium">切换号码</span>
        </div>
        <div class="flex items-start text-xs text-gray-500 mb-8">
          <div class="w-4 h-4 mt-0.5 mr-2 flex-shrink-0 border-2 border-gray-400 rounded-full"></div>
          <div>
            同意
            <a href="#" class="text-sky-600">《天翼账号服务与隐私协议》</a><a href="#" class="text-sky-600">《法律条款及隐私政策》</a>并授权哈啰获取本机号码
          </div>
        </div>
        <van-button type="primary" round block color="#2C2C2C" size="large">
          一键登录
        </van-button>
      </div>
      <div class="flex-grow"></div>
      <div class="flex-shrink-0 w-full mt-16 mb-6">
        <div class="flex items-center">
          <div class="flex-grow border-t border-gray-200"></div>
          <span class="mx-4 text-xs text-gray-400">其他登录方式</span>
          <div class="flex-grow border-t border-gray-200"></div>
        </div>
        <div class="flex justify-center items-center space-x-8 mt-6">
          <div class="w-12 h-12 rounded-full flex items-center justify-center bg-[#3770D9]">
            <span class="iconify text-white text-3xl" data-icon="ri:dingding-fill"></span>
          </div>
          <div class="w-12 h-12 rounded-full flex items-center justify-center bg-black">
            <span class="iconify text-white text-3xl" data-icon="ic:baseline-apple"></span>
          </div>
          <div class="w-12 h-12 rounded-full flex items-center justify-center bg-[#12B7F5]">
            <span class="iconify text-white text-3xl" data-icon="ri:qq-fill"></span>
          </div>
          <div id="io75w" class="w-12 h-12 rounded-full flex items-center justify-center bg-[#C71D23] io75w spark-custom-io75w io75w">
            <span class="iconify text-white text-3xl" data-icon="simple-icons:gitee"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>

